import React from 'react'
import {Text, View} from "react-native";
import Nav from "./common/nav";
import Flex from "@ant-design/react-native/es/flex/Flex";
import InputItem from "@ant-design/react-native/es/input-item/index";
import List from "@ant-design/react-native/es/list/index";
import WingBlank from "@ant-design/react-native/es/wing-blank/index";
import Button from "@ant-design/react-native/es/button/index";
import WhiteSpace from "@ant-design/react-native/es/white-space/index";
import {Actions} from 'react-native-router-flux'

export default class MessageLogin extends React.Component {
  state = {
    phone: '',
    code: '',
  }

  render() {
    const {phone, code} = this.state
    return <View style={{backgroundColor: 'white', height: '100%'}}>
      <WhiteSpace size='xl'/>
      <Nav/>
      <WingBlank style={{marginTop: '30%'}}>
        <List>
          <InputItem
            clear
            type={'phone'}
            value={phone}
            onChange={phone => this.setState({phone})}
            placeholder="请输入手机号码"
          />
          <WhiteSpace size='lg'/>
          <Flex>
            <View style={{width: '60%'}}>
              <InputItem
                value={code}
                onChange={code => this.setState({code})}
                placeholder="请输入验证码"
              />
            </View>
            <View style={{width: '40%', fontSize: 10}}>
              <Button>获取验证码</Button>
            </View>
          </Flex>
          <WhiteSpace size='lg'/>
          <Button type="primary"
                  onPress={() => Actions.push('home')}>
            登陆</Button>
        </List>
      </WingBlank>
    </View>
  }
}